
<template>
  <div id="control" class="role">
    <div class="search">
      <div class="s1">
        <el-input v-model="params.name" placeholder="请输入角色名称"></el-input>
        <el-button @click="getList()" class="butB_Sel">查询</el-button>
        <el-button @click="handleEdit('add')" class="butB_Sel"
          >新增角色</el-button
        >
      </div>
    </div>
    <el-table border :data="dataList">
      <el-table-column type="index" width="70" label="序号"> </el-table-column>
      <template v-for="(item, index) in $baseBai['roleData']['list']">
        <el-table-column
          :width="item.width"
          :prop="item.prop"
          :label="item.label"
          :key="index + item"
        >
        </el-table-column>
      </template>

      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row, 1)"
            >编辑</el-button
          >
          <el-dropdown
            class="tableMore"
            split-button
            type="primary"
            size="mini"
            @command="handleClick"
          >
            更多
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="scope.row" type="1"
                >复制</el-dropdown-item
              >
              <el-dropdown-item :command="scope.row" type="2"
                >配置权限</el-dropdown-item
              >
              <el-dropdown-item :command="scope.row" type="3"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="editParams.show">
      <el-dialog
        title="提示"
        :visible.sync="editParams.show"
        width="30%"
        :before-close="handleClose"
      >
        <div class="editList">
          <span c1>角色名称：</span
          ><el-input
            v-model="editParams.name"
            size="mini"
            placeholder="请输入角色名称"
          ></el-input>
        </div>
        <div class="editList">
          <span c1>角色描述：</span
          ><el-input
            type="textarea"
            :rows="2"
            v-model="editParams.description"
            size="mini"
            placeholder="请输入角色描述"
          ></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editParams.show = false">取 消</el-button>
          <el-button type="primary" @click="getSave">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
let t;
import FromList from "@/forComponents/fromList/fromList";
import TopManu from "@/components/TopMenu";

export default {
  name: "control",
  data() {
    return {
      params: {
        name: "",
      },
      editParams: {
        show: false,
        name: "",
        description: "",
        id: "",
        type: "",
      },
      dataList: [],
    };
  },
  mounted() {
    t = this;
    t.getList();
  },
  methods: {
    getList() {
      let d = {
        name: t.params.name,
      };
      t["_API"].getRoleIndex(d).then((res) => {
        console.log("res", res);
        if (res.code == 200) {
          t.dataList = res.data.list;
        }
      });
    },

    getSave() {
      let d = {
        name: t.editParams.name,
        description: t.editParams.description,
      };
      if (t.editParams.id) {
        d.id = t.editParams.id;
      }

      let url = t.editParams.type == "copy" ? "getRoleCopy" : "getRoleSave";

      t["_API"][url](d).then((res) => {
        t.editParams.show = false;
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          t.getList();
        }
      });
    },
    handleClose() {
      t.editParams.show = false;
      t.editParams.id = "";
    },
    handleEdit(...item) {
      t.editParams.type = "";
      if (item[0] == "add") {
        t.editParams.name = "";
        t.editParams.description = "";
        t.editParams.id = "";
      } else {
        t.editParams.name = item[1].name;
        t.editParams.description = item[1].description;
        t.editParams.id = item[1].id;
      }

      t.editParams.show = true;
    },
    handleClick(...item) {
      switch (item[1].$attrs.type) {
        case "1":
          t.editParams.name = item[0].name;
          t.editParams.description = item[0].description;
          t.editParams.id = item[0].id;
          t.editParams.show = true;
          t.editParams.type = "copy";

          break;
        case "2":
          this.$router.push({
            name: "jurisdiction",
            query: { id: item[0].id },
          });
          break;
        case "3":
          let d = {
            id: item[0].id,
          };

          t["_API"].getRoleDel(d).then((res) => {
            t.editParams.show = false;
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              t.getList();
            }
          });

          break;
      }
    },
  },
  components: {
    TopManu,
  },
};
</script>

<style lang="scss" scoped>
.role {
  margin: 5% 5% 0;
}

.search {
  // border: 1px solid #f2f2f2;

  padding-bottom: 20px;
  border-radius: 10px;
  .s1 {
    margin-bottom: 20px;
    width: 405px;
    display: flex;
    .el-input {
      margin-right: 10px;
    }
    button {
      margin-left: 20px;

      color: white;
    }
  }
  .selectBai {
    display: flex;
    > div {
      margin-right: 10px;
    }
  }
}

.editList {
  display: flex;
  width: 300px;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 20px;
  [c1] {
    width: 100px;
  }
}
</style>
